<template>
	<view class="login-container">
		<!-- 动态地球背景 -->
		<view class="earth-background">
			<view class="earth">
				<!-- 第一层：正转 -->
				<view class="rotate-container outer-rotate">
					<image class="image" src="@/static/xuanzhuanaa.png" mode="aspectFit" />

					<!-- 第二层：倒转 -->
					<view class="rotate-container inner-rotate">
						<image class="image" src="@/static/xuanzhuanbb.png" mode="aspectFit" />

						<!-- 第三层：正转 -->
						<view class="rotate-container outer-rotate">
							<image class="image" src="@/static/xuanzhuancc.png" mode="aspectFit" />

							<!-- 第四层：倒转 -->
							<view class="rotate-container inner-rotate">
								<image class="image" src="@/static/xuanzhuandd.png" mode="aspectFit" />
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="orbit"></view>
			<view class="particles">
				<view v-for="i in 30" :key="i" class="particle"></view>
			</view>
		</view>

		<!-- 登录表单 -->
		<view class="login-box">
			<view class="containerhome">
				<!-- 顶部标题 -->
				<view class="header">
					<view class="title">{{ isLogin ? '欢 迎 登 录' : '用 户 注 册' }}</view>
				</view>
				<!-- 登录/注册表单 -->
				<view class="form-container">
					<!-- 用户名输入 -->
					<view class="input-group" v-if="isLogin">
						<text class="label">用户名或手机号</text>
						<input class="input" v-model="form.username" placeholder="请输入用户名或手机号"
							placeholder-class="placeholder" />
					</view>
					<view class="input-group" v-if="!isLogin">
						<text class="label">昵称</text>
						<input class="input" v-model="form.nikeName" placeholder="请输入昵称"
							placeholder-class="placeholder" />
					</view>
					<view class="input-group" v-if="!isLogin">
						<text class="label">手机号</text>
						<input class="input" v-model="form.phoneNumber" placeholder="请输入手机号"
							placeholder-class="placeholder" inputmode="tel" />
					</view>

					<!-- 密码输入 -->
					<view class="input-group">
						<text class="label">密码</text>
						<view class="password-input-wrapper">
							<input class="input" v-model="form.password" :password="!showPassword" placeholder="请输入密码"
								placeholder-class="placeholder" />
							<view class="password-toggle" @click="togglePassword">
								<uni-icons :type="typeicon" size="30" :color="coloricon"></uni-icons>
							</view>
						</view>
					</view>

					<!-- 注册时的确认密码 -->
					<view class="input-group" v-if="!isLogin">
						<text class="label">确认密码</text>
						<view class="password-input-wrapper">
							<input class="input" v-model="form.confirmPassword" :password="!showPassword"
								placeholder="请再次输入密码" placeholder-class="placeholder" />
							<view class="password-toggle" @click="togglePassword">
								<uni-icons :type="typeicon" size="30" :color="coloricon"></uni-icons>
							</view>
						</view>
					</view>
					<!-- 注册时的部门 -->
					<view class="input-group" v-if="!isLogin">
						<text class="label">选择部门</text>
					</view>
					<view class="password-input-wrapper" style="background-color: #fff;border-radius: 10rpx;"
						v-if="!isLogin">
						<!-- <u-button type="primary" shape="circle" color="#1fc9c9" text="点击选择部门"></u-button> -->
						<uni-data-picker placeholder="请选择部门" popup-title="请选择所在部门" :localdata="dataTree"
							v-model="classes" @change="changeFn" @popupopened="onpopupopened"
							@popupclosed="onpopupclosed">
						</uni-data-picker>
					</view>

					<!-- 登录按钮 -->
					<button class="submit-btn" hover-class="submit-btn-acv" :class="{ 'register-btn': !isLogin }"
						@click="handleSubmit">
						{{ isLogin ? '登录' : '注册' }}
					</button>
				</view>

				<!-- 切换登录/注册 -->
				<view class="switch-text" @click="toggleLoginRegister">
					{{ isLogin ? '没有账号？立即注册' : '已有账号？立即登录' }}
				</view>
				<!-- 异常弹窗 -->
				<u-toast ref="uToast"></u-toast>
			</view>
		</view>

		<!-- 波浪动画 -->
		<view class="wave-box">
			<view class="wave wave1"></view>
			<view class="wave wave2"></view>
		</view>
		<!-- 版权信息 -->
		<view class="copyright">
			<text>© 2024 河北浩水科技有限公司版权所有</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				typeicon: 'eye', //密码显示
				coloricon: '#666', //密码显示
				isLogin: true, // 当前是否为登录状态
				showPassword: false, // 是否显示密码
				form: {
					deptId: '',
					nikeName: '',
					username: '',
					password: '',
					phoneNumber: '',
					confirmPassword: '',
				},
				classes: '',
				dataTree: []
			}
		},
		onLoad(option) {
			this.form.username = this.vuex_usernameLogin,
				this.form.password = this.vuex_passwordLogin
			this.departmentTreeInformation()

		},
		methods: {
			// 选择部门
			changeFn(e) {
				let arr = e.detail.value
				this.classes = arr[arr.length - 1].value
				this.form.deptId = arr[arr.length - 1].value
				console.log('选择完成时触发', arr[arr.length - 1].value);
			},
			onpopupopened() {
				// 树形
				console.log('打开部门树');
			},
			onpopupclosed() {
				console.log('部门树关闭');
			},
			// 切换密码显示/隐藏
			togglePassword() {
				if (!this.showPassword) {
					this.typeicon = 'eye-filled'
					this.coloricon = '#00aa7f'
				} else {
					this.typeicon = 'eye'
					this.coloricon = '#666'
				}

				this.showPassword = !this.showPassword
			},


			// 切换登录/注册
			toggleLoginRegister() {
				this.isLogin = !this.isLogin
				// 重置密码显示状态
				this.showPassword = false
				// 清空表单
				this.form = {
					username: '',
					password: '',
					phoneNumber: '',
					confirmPassword: ''
				}
				// 切换
				this.typeicon = 'eye'
				this.coloricon = '#666'
			},

			// 提交表单
			handleSubmit() {
				console.log('!this.isLogin ', this.isLogin);
				if (!this.isLogin && this.classes == '') {
					uni.showToast({
						title: '部门未选择',
						icon: 'none'
					})
					return
				}
				if (!this.isLogin && !(uni.$u.test.mobile(this.form.phoneNumber))) {
					uni.showToast({
						title: '手机号不正确',
						icon: 'none'
					})
					return
				}
				if (!this.isLogin && !this.form.nikeName || !this.form.password) {
					uni.showToast({
						title: '请输入昵称和密码',
						icon: 'none'
					})
					return
				}

				if (!this.isLogin && this.form.password !== this.form.confirmPassword) {
					uni.showToast({
						title: '两次密码输入不一致',
						icon: 'none'
					})
					return
				}

				// 这里应该是调用API的代码
				if (this.isLogin) {
					this.login()
				} else {
					this.register()
				}
			},

			// 登录
			login() {
				uni.showToast({
					title: '登录中...',
					icon: 'loading',
					mask: true,
					duration: 500
				});
				uni.$u.http.post('/login', {
					"username": this.form.username,
					"password": this.form.password
				}).then(res => {
					console.log('登录', res);
					if (res.code != 200) {
						this.$refs.uToast.show({
							type: 'error',
							position: 'top',
							icon: false,
							message: '账号密码错误'
						})
					}
					if (res.code == 200) {
						uni.hideLoading()
						console.log('获取---', res)
						uni.$u.vuex('vuex_token', res.token)
						uni.$u.vuex('vuex_login', 1)
						uni.$u.vuex('vuex_usernameLogin', this.form.username)
						uni.$u.vuex('vuex_passwordLogin', this.form.password)
						uni.redirectTo({
							url: '/pages/index/home'
						});
					}
				}).catch(err => {
					uni.showToast({
						title: '未连接网络',
						icon: 'loading',
						mask: true,
						duration: 500
					});
					console.log('错误', err);
				})
			},

			// 模拟注册
			register() {
				uni.showLoading({
					title: '注册中...'
				})
				console.log(this.form.deptId * 1, this.form.nikeName, this.form.phoneNumber, this.form.password);
				// 模拟API请求
				uni.$u.http.post('/api/device/userRegistrationAudit/userRegistration', {
					"deptId": this.form.deptId * 1,
					"nikeName": this.form.nikeName,
					"phoneNumber": this.form.phoneNumber,
					"password": this.form.password
				}).then(res => {
					uni.hideLoading()
					console.log('注册', res);
					this.toastFnAA(res.msg)
					if (res.code == 200) {
						setTimeout(() => {
							// 注册成功后自动切换到登录状态
							this.isLogin = true
							this.form.password = ''
							this.form.confirmPassword = ''
							this.showPassword = false
							this.classes = ''
						}, 500)

					}
				}).catch(err => {
					uni.hideLoading()
					uni.showToast({
						title: '未连接网络',
						icon: 'loading',
						mask: true,
						duration: 500
					});
					console.log('错误', err);
				})

			},
			// 部门树形信息
			departmentTreeInformation() {
				uni.$u.http.get('/api/device/device/deptTreeSelect').then(res => {
					if (res.code == 200) {
						console.log('部门树形--', res.data);
						this.dataTree = this.transformTreeData(res.data)
					}
				}).catch(err => {
					this.toastFn()
					console.log('错误', err);
				})
			},
			// 弹窗
			toastFnAA(data) {
				this.$refs.uToast.show({
					type: "error",
					icon: false,
					title: "失败主题",
					message: data,
				});
			},
			toastFn() {
				this.$refs.uToast.show({
					type: "error",
					icon: false,
					title: "失败主题",
					message: "获取网络失败",
				});
			},
			// 递归遍历转换
			transformTreeData(tree) {
				return tree.map(node => {
					const newNode = {
						value: node.id, // 将id改为value
						text: node.label // 将label改为text
					};

					// 复制其他属性
					for (const key in node) {
						if (key !== 'id' && key !== 'label' && key !== 'children') {
							newNode[key] = node[key];
						}
					}

					// 递归处理子节点
					if (node.children && node.children.length) {
						newNode.children = this.transformTreeData(node.children);
					}

					return newNode;
				});
			}
		}
	}
</script>
<style lang="scss" scoped>
	/* 公共样式 */
	.container {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 40rpx;
		background-color: #f1f4f6;
		min-height: 100vh;
		box-sizing: border-box;
	}

	/* 头部标题 */
	.header {
		text-align: center;
		
	}

	.title {
		font-size: 48rpx;
		font-weight: bold;
		color: #aaffff;
	}

	/* 表单容器 */
	.form-container {
		width: 100%;
		max-width: 600rpx;
	}

	/* 输入框组 */
	.input-group {
		margin-bottom: 30rpx;
	}

	.label {
		display: block;
		font-size: 28rpx;
		color: #aaffff;
		margin-bottom: 16rpx;
	}

	/* 密码输入框容器 */
	.password-input-wrapper {
		position: relative;
	}

	.input {
		width: 100%;
		height: 80rpx;
		padding: 0 20rpx;
		border: 1rpx solid #ddd;
		border-radius: 8rpx;
		font-size: 28rpx;
		background-color: #fff;
		box-sizing: border-box;
		padding-right: 80rpx;
		/* 为眼睛图标留出空间 */
	}

	.placeholder {
		color: #ccc;
		font-size: 28rpx;
	}

	/* 密码显示/隐藏按钮 */
	.password-toggle {
		position: absolute;
		right: 20rpx;
		top: 50%;
		transform: translateY(-50%);
		width: 40rpx;
		height: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	/* 提交按钮 */
	.submit-btn {
		width: 100%;
		height: 88rpx;
		line-height: 88rpx;
		border-radius: 44rpx;
		background-color: #007aff;
		color: #fff;
		font-size: 32rpx;
		margin-top: 60rpx;
		border: none;
	}

	.submit-btn-acv {
		background-color: rgba(0, 122, 255, 0.5);
	}

	.register-btn {
		background-color: #4cd964;
	}

	/* 切换登录/注册文本 */
	.switch-text {
		margin-top: 40rpx;
		color: #007aff;
		font-size: 28rpx;
	}
</style>
<style lang="scss" scoped>
	.login-container {
		position: relative;
		width: 100%;
		height: 100vh;
		background: linear-gradient(135deg, #08101d, #18243d);
		overflow: hidden;
	}

	.earth-background {
		position: absolute;
		width: 100%;
		height: 100%;

		.earth {
			position: relative;
		}

		.orbit {
			position: absolute;
			left: 50rpx;
			top: 50rpx;
			width: 400rpx;
			height: 400rpx;
			// border: 4rpx solid rgba(0, 255, 255, 0.1);
			border-radius: 50%;
			animation: rotate 10s linear infinite;
		}
	}

	.particles {
		position: absolute;
		width: 100%;
		height: 100%;

		.particle {
			position: absolute;
			width: 20rpx;
			height: 20rpx;
			background: rgba(0, 255, 255, 0.5);
			border-radius: 50%;
			animation: float 2s linear infinite;

			@for $i from 1 through 20 {
				&:nth-child(#{$i}) {
					left: random(100) * 1%;
					top: random(100) * 1%;
					animation-delay: random(2000) * 1ms;
				}
			}
		}
	}

	.login-box {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 600rpx;
		padding: 30rpx;
		background: rgba(255, 255, 255, 0.1);
		backdrop-filter: blur(20rpx);
		border-radius: 30rpx;
		box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.2);
		z-index: 9999;
	}

	.input-group {
		margin-bottom: 20rpx;
	}



	.wave-box {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 300rpx;
		overflow: hidden;

		.wave {
			position: absolute;
			bottom: 0;
			width: 400%;
			height: 100%;
			background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120'%3E%3Cpath d='M0,80 C300,80 300,40 600,40 C900,40 900,80 1200,80 C1200,80 1200,120 1200,120 L0,120 L0,80 Z' fill='%23a0d4ff' fill-opacity='.1'/%3E%3C/svg%3E");
			background-position: 0 bottom;
			background-repeat: repeat-x;
			animation: wave 12s linear infinite;
			transform-origin: center bottom;
		}

		.wave1 {
			animation: wave 18s linear infinite;
			opacity: 0.4;
		}

		.wave2 {
			animation: wave 10s linear infinite;
			opacity: 0.7;
		}
	}

	@keyframes rotate {
		from {
			transform: rotate(0deg);
		}

		to {
			transform: rotate(360deg);
		}
	}

	@keyframes float {
		0% {
			transform: translateY(0) scale(1);
			opacity: 1;
		}

		100% {
			transform: translateY(-100rpx) scale(0);
			opacity: 0;
		}
	}

	@keyframes wave {
		0% {
			transform: translateX(0);
		}

		100% {
			transform: translateX(-50%);
		}
	}

	.copyright {
		position: absolute;
		bottom: 60rpx;
		left: 0;
		width: 100%;
		text-align: center;

		text {
			display: block;
			font-size: 35rpx;
			color: rgba(255, 255, 255, 0.5);
			margin-bottom: 10rpx;
		}
	}
</style>
<style lang="scss" scoped>
	.rotate-container {
		position: absolute;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 50%;
		box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.1);
	}

	/* 外层容器尺寸 */
	.outer-rotate {
		width: 600rpx;
		height: 600rpx;
		// background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
	}

	/* 内层容器尺寸 */
	.inner-rotate {
		width: 450rpx;
		height: 450rpx;
		// background: linear-gradient(135deg, #e0eafc 0%, #cfdef3 100%);
	}

	/* 更内层容器尺寸 */
	.outer-rotate .outer-rotate {
		width: 300rpx;
		height: 300rpx;
		// background: linear-gradient(135deg, #c9d6ff 0%, #e2e2e2 100%);
	}

	/* 最内层容器尺寸 */
	.inner-rotate .inner-rotate {
		width: 150rpx;
		height: 150rpx;
		// background: linear-gradient(135deg, #a1c4fd 0%, #c2e9fb 100%);
	}

	.image {
		width: 80%;
		height: 80%;
		object-fit: contain;
	}

	/* 正转动画 */
	.outer-rotate {
		animation: rotate-clockwise 20s linear infinite;
	}

	/* 倒转动画 */
	.inner-rotate {
		animation: rotate-counterclockwise 15s linear infinite;
	}

	/* 第三层正转动画 */
	.outer-rotate .outer-rotate {
		animation: rotate-clockwise 10s linear infinite;
	}

	/* 第四层倒转动画 */
	.inner-rotate .inner-rotate {
		animation: rotate-counterclockwise 5s linear infinite;
	}

	@keyframes rotate-clockwise {
		from {
			transform: rotate(0deg);
		}

		to {
			transform: rotate(360deg);
		}
	}

	@keyframes rotate-counterclockwise {
		from {
			transform: rotate(0deg);
		}

		to {
			transform: rotate(-360deg);
		}
	}
</style>